/**
 * Created with Vim7.3 Mac
 * @fileOverview : 
 * @author : Lyle lylechen2014@gmail.com
 * @since : 2016-08-22 16:34:35
 * @filename : myProfileAbout.js
 * @version : 
 * @description : 
 */


import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    ScrollView
} from 'react-native';

let { width, height } = Utils.size;
let userObj;

class MyProfileAbout extends Component {

    constructor(props) {
        super(props);
        SceneObj.MyProfileAbout = this;
        Share.regResponder('about','MyProfileAbout');
        this.state = {};
        userObj = this.getUserInfo();
    }

    responseRender(type) {
        userObj = this.getUserInfo();
        this.forceUpdate();
    }

    render() {
        return (
          <View style={styles.myProfileAbout}>
              <ScrollView style={styles.scrollView}>
                <View style={styles.rowProfile}>
                   <View style={styles.seekingUp}>   
                       <Text>{this.getSeekText()}</Text>
                       <Image style={styles.editIcon} source={require('../img/edit.png') } />
                   </View>
                   <View>  
                       <Text style={styles.profileValue}>{this.getSeek()}</Text>
                   </View>
                </View>

                <View style={styles.rowProfile}>
                   <View style={styles.seekingUp}>   
                       <Text>{Lang.myProfileAbout_headLine}</Text>
                       <Image style={styles.editIcon} source={require('../img/edit.png') } />
                   </View>
                   <View>  
                       <Text style={styles.profileValue}>{this.getHeadLine()}</Text>
                   </View>
                </View>

                 <View style={styles.rowProfile}>
                   <View style={styles.seekingUp}>   
                       <Text>{Lang.myProfileAbout_aboutMe}</Text>
                       <Image style={styles.editIcon} source={require('../img/edit.png') } />
                   </View>
                   <View>  
                       <Text style={styles.profileValue}>{this.getAboutMe()}</Text>
                   </View>
                </View>

                 <View style={styles.rowProfile}>
                   <View style={styles.seekingUp}>   
                       <Text>{Lang.myProfileAbout_aboutMymatch}</Text>
                       <Image style={styles.editIcon} source={require('../img/edit.png') } />
                   </View>
                   <View>  
                       <Text style={styles.profileValue}>{this.getAboutMyMatch()}</Text>
                   </View>
                </View>

                <View style={styles.rowProfile}>
                   <View style={styles.seekingUp}>   
                       <Text>{Lang.myProfileAbout_liveWith}</Text>
                       <Image style={styles.editIcon} source={require('../img/edit.png') } />
                   </View>
                   <View>  
                       <Text style={styles.profileValue}>{this.getLiveWith()}</Text>
                   </View>
                </View>

                <View style={styles.rowProfile}>
                   <View style={styles.seekingUp}>   
                       <Text>{Lang.myProfileAbout_mfdi}</Text>
                       <Image style={styles.editIcon} source={require('../img/edit.png') } />
                   </View>
                   <View>  
                       <Text style={styles.profileValue}>{this.getMyFirstDateIdea()}</Text>
                   </View>
                </View>

                 <View style={styles.rowProfile}>
                   <View style={styles.seekingUp}>   
                       <Text>{Lang.myProfileAbout_RelationshipStatus}</Text>
                       <Image style={styles.editIcon} source={require('../img/edit.png') } />
                   </View>
                   <View>  
                       <Text style={styles.profileValue}>{this.getRelationshipStatus()}</Text>
                   </View>
                </View>

                <View style={styles.rowProfile}>
                   <View style={styles.seekingUp}>   
                       <Text>{Lang.myProfileAbout_lookFor}</Text>
                       <Image style={styles.editIcon} source={require('../img/edit.png') } />
                   </View>
                   <View>  
                       <Text style={styles.profileValue}>{this.getLookFor()}</Text>
                   </View>
                </View>

              </ScrollView>
            </View>
        );
    }

    getUserInfo() {
        return JSON.parse(Store.session_user_id);
    }

    getSeekText() {
        let genderStr = Share.genderToStr(userObj.account.gender);
        return Share.repalceStr(Lang.myProfileAbout_seek,[genderStr]);
    }

    getSeek() {
        let genderStr = Share.genderToStr(userObj.match.match_gender,1);
        let age = userObj.match.match_age_min+'-'+userObj.match.match_age_max;
        return genderStr+', '+age;
    }

    getHeadLine() {
        return Share.filterValue(userObj.about.headline);
    }

    getAboutMe() {
        return Share.filterValue(userObj.about.about_me);
    }

    getAboutMyMatch() {
        return Share.filterValue(userObj.about.about_my_match);
    }

    getLiveWith() { 
        return Share.showCheckboxLabel('local_disability',userObj.about.disability);
    }

    getMyFirstDateIdea() {
        return userObj.about.firstidea ? userObj.about.firstidea : Lang.myProfileAbout_defaultFirstIdeaText;
    }

    getRelationshipStatus() {
        return Share.showCheckboxLabel('local_marital',userObj.about.relationship_status);
    }

    getLookFor() {
        return Share.showCheckboxLabel('local_relation',userObj.about.looking_for);
    }
}

const styles = StyleSheet.create({

    myProfileAbout:{
      flex:1,
      width:width,
      height:height-200,
      backgroundColor:'#fff',
      paddingTop:10,
    },

    rowProfile: {
        marginLeft:15,
        marginRight:15,
        marginTop:10,
        marginBottom:10,
    },

    seekingUp: {
        flexDirection: 'row',
        justifyContent: 'space-between',
    },

    editIcon: {
        width:15,
        height:15, 
    },

    profileValue: {
        marginTop:10,
        color:'#666',
        fontSize:12,
    },

});

export default MyProfileAbout;
